<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/12/2
  Time: 19:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<style type="text/css">
			.a {
				position: relative;
				right: 60px;
			}
			
			.fyia {
				align-content: center;
			}
		</style>
		<!-- Favicon icon -->
		<link rel="icon" type="image/png" sizes="16x16" href="${pageContext.request.contextPath}/backstatic/assets/images/favicon.png">
		<title>超级管理员</title>
		<!-- Bootstrap Core CSS -->
		<link href="${pageContext.request.contextPath}/backstatic/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
		<!-- This page CSS -->
		<!-- chartist CSS -->
		<link href="${pageContext.request.contextPath}/backstatic/assets/plugins/chartist-js/dist/chartist.min.css" rel="stylesheet">
		<!--		<link href="../../../backstatic/assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.css" rel="stylesheet">
-->
		<!--c3 CSS -->
		<link href="${pageContext.request.contextPath}/backstatic/assets/plugins/c3-master/c3.min.css" rel="stylesheet">
		<!-- Custom CSS -->
		<link href="${pageContext.request.contextPath}/backstatic/css/style.css" rel="stylesheet">
		<!-- Dashboard 1 Page CSS -->
		<link href="${pageContext.request.contextPath}/backstatic/css/pages/dashboard.css" rel="stylesheet">
		<!-- You can change the theme colors from here -->
		<link href="${pageContext.request.contextPath}/backstatic/css/colors/default-dark.css" id="theme" rel="stylesheet">

	</head>

	<body class="fix-header fix-sidebar card-no-border">

		<div class="preloader">
			<div class="loader">
				<div class="loader__figure"></div>
				<p class="loader__label">凡一博客园</p>
			</div>
		</div>

		<div id="main-wrapper">

			<header class="topbar">
				<nav class="navbar top-navbar navbar-expand-md navbar-light">
					<div class="navbar-header">
						<a class="navbar-brand" href="index.html">
							<b>
                  				<img src="${pageContext.request.contextPath}/backstatic/assets/images/logo-icon.png" alt="homepage" class="dark-logo" /><span class="dark-logo">凡一博客园</span>
              				</b>
						</a>
					</div>
				</nav>
			</header>

			<aside class="left-sidebar">
				<!-- Sidebar scroll-->
				<div class="scroll-sidebar">
					<!-- Sidebar navigation-->
					<nav class="sidebar-nav">
						<ul id="sidebarnav">
							<li>
								<a class="waves-effect waves-dark" href="${pageContext.request.contextPath}/article/backIndexView" aria-expanded="false"><i class="mdi mdi-gauge"></i><span class="hide-menu">后台主页</span></a>
							</li>
							<li class="active">
								<a class="waves-effect waves-dark" href="#" aria-expanded="false"><i class="mdi mdi-account-check"></i><span class="hide-menu">管理员</span></a>
							</li>
							<li>
								<a class="waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-book-open-variant"></i><span class="hide-menu">文章</span></a>
								<ul class="sun-menu">
									<li>
										<a href="${pageContext.request.contextPath}/article/ShowArticleView">查看文章</a>
									</li>
									<li>
										<a href="${pageContext.request.contextPath}/article/ArticleManagerView">管理文章</a>
									</li>
								</ul>
							</li>
							<li>
								<a class="waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-emoticon"></i><span class="hide-menu">留言</span></a>
								<ul class="sun-menu">
									<li>
										<a href="${pageContext.request.contextPath}/message/messageBackView">留言中心</a>
									</li>

								</ul>
							</li>
							<li>
								<a class="waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-emoticon"></i><span class="hide-menu">评论</span></a>
								<ul class="sun-menu">
									<li>
										<a href="#">查看评论</a>
									</li>
									<li>
										<a href="#">管理评论</a>
									</li>
								</ul>
							</li>
							<li>
								<a class="waves-effect waves-dark" href="pages-blank.html" aria-expanded="false"><i class="mdi mdi-table menu-icon-inbox"></i><span class="hide-menu">用户</span></a>
								<ul class="sun-menu">
									<li>
										<a href="${pageContext.request.contextPath}/user/showUserView">用户中心</a>
									</li>

								</ul>
							</li>
							<li>
								<a class="waves-effect waves-dark" href="${pageContext.request.contextPath}/admin/articleIndexView" aria-expanded="false"><i class="mdi mdi-earth"></i><span class="hide-menu">返回前台</span></a>
							</li>
							<li>
								<a class="waves-effect waves-dark" href="${pageContext.request.contextPath}/admin/pages404View" aria-expanded="false"><i class="mdi mdi-help-circle"></i><span class="hide-menu">404</span></a>
							</li>
						</ul>
						<div class="text-center m-t-30 a">
							<a href="${pageContext.request.contextPath}/" class="btn waves-effect waves-light btn-info">Log out</a>
						</div>
					</nav>
				</div>
			</aside>

			<!-- 添加Modal -->
			<div class="modal fade" id="myModalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="myModalLabel">增加管理员</h4>
						</div>
						<div class="modal-body">
							<form class="form-horizontal" id="addForm">

								<div class="form-group">
									<label for="adminName" class="col-sm-2 control-label"></label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="adminName" name="adminName" placeholder="请输入用户名">
									</div>
								</div>

								<div class="form-group">
									<label for="password" class="col-sm-2 control-label"></label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="password" name="password" placeholder="请输入密码">
									</div>
								</div>

								<div class="form-group">
									<label for="phone" class="col-sm-2 control-label"></label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="phone" name="phone" placeholder="Phone">
									</div>
								</div>

								<div class="form-group">
									<label for="eMail" class="col-sm-2 control-label"></label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="eMail" name="eMail" placeholder="E-mail">
									</div>
								</div>
							</form>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
							<button type="button" class="btn btn-primary save">保存</button>
						</div>
					</div>
				</div>
			</div>
			<%--添加模态框end--%>
			<div class="page-wrapper">

				<div class="container-fluid">
					<div class="col-md-5 align-self-center">
						<h3 class="text-themecolor">Super Admin</h3>
					</div>
					<div>
						<div class="panel panel-default">
							<div class="panel-heading">

								<div class="btn-toolbar aa" role="toolbar" style="margin-top: 10px;">
								</div>
								<div class="btn-group" role="group">
									<button class="btn btn-info" data-toggle="modal" data-target="#myModalAdd"><span class="glyphicon glyphicon-plus"></span> 增加超级管理员</button>
								</div>
							</div>
							<div class="panel-body">
								<table id="tb" class="table table-hover table-bordered text-center">
									<tr>
										<td class="text-center">ID</td>
										<td class="text-center">Name</td>
										<td class="text-center">Password</td>
										<td class="text-center">Phone</td>
										<td class="text-center">E-mail</td>
										<td class="text-center">CreatTime</td>
										<td class="text-center">CQ</td>
									</tr>
									<tbody id="tbody">

									</tbody>
								</table>
							</div>
							<div class="page">
								<nav>
									<ul class="pagination pull-right">
										<li>
											<a href="#">
												<span aria-hidden="true">&laquo;</span>
											</a>
										</li>
										<li>
											<a href="#">1</a>
										</li>
										<li>
											<a href="#">2</a>
										</li>
										<li>
											<a href="#">3</a>
										</li>
										<li>
											<a href="#">4</a>
										</li>
										<li>
											<a href="#">5</a>
										</li>
										<li>
											<a href="#" aria-label="Next">
												<span aria-hidden="true">&raquo;</span>
											</a>
										</li>
									</ul>
								</nav>
								<nav class="pagination pull-right">
									<ul id="mypage"></ul>
								</nav>

								<div class="clearfix"></div>
							</div>
						</div>
					</div>
				</div>

				<footer class="footer "> Welcome to fyi world

					<a class="fyia" href="#" title="凡一博客" target="_blank">凡一博客</a>
				</footer>

			</div>

			<script src="${pageContext.request.contextPath}/backstatic/assets/plugins/jquery/jquery.min.js"></script>
			<!-- Bootstrap popper Core JavaScript -->
			<script src="${pageContext.request.contextPath}/backstatic/assets/plugins/bootstrap/js/popper.min.js"></script>
			<script src="${pageContext.request.contextPath}/backstatic/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
			<!-- slimscrollbar scrollbar JavaScript -->
			<script src="${pageContext.request.contextPath}/backstatic/js/perfect-scrollbar.jquery.min.js"></script>
			<!--Wave Effects -->
			<script src="${pageContext.request.contextPath}/backstatic/js/waves.js"></script>
			<!--Menu sidebar -->
			<script src="${pageContext.request.contextPath}/backstatic/js/sidebarmenu.js"></script>
			<!--Custom JavaScript -->
			<script src="${pageContext.request.contextPath}/backstatic/js/custom.min.js"></script>
			<!-- ============================================================== -->
			<!-- This page plugins -->
			<!-- ============================================================== -->
			<script src="${pageContext.request.contextPath}/backstatic/assets/plugins/chartist-js/dist/chartist.min.js"></script>

			<script type="text/javascript">
				$(function() {
							$.ajax({
								url: "${pageContext.request.contextPath}/admin/selectAllAdmin",
								type: "post",
								contentType: "application/json;charset=utf-8",
								dataType: "json",
								success: function(data) {
									console.log(data)
									var $strHtml = "";
									$.each(data.data, function(index, object) {
										$strHtml += "<tr  data-id=" + object.adminId + ">";
										$strHtml += "<td align='center'>" + object.adminId + "</td>";
										$strHtml += "<td align='center'>" + object.adminName + "</td>";
										$strHtml += "<td align='center'>" + object.password + "</td>";
										$strHtml += "<td align='center'>" + object.phone + "</td>";
										$strHtml += "<td align='center'>" + object.email + "</td>";
										$strHtml += "<td align='center'>" + object.createAdminTime + "</td>";

                                $strHtml += '<td align=\'center\'><button type="button" class="btn btn-danger del " data-target="#myModal" data-toggle="modal">DEL</button></td>';

										$strHtml += "</tr>";
									});
									$('#tbody').append($strHtml);
								}
							});

					/*添加*/
					$("body").on("click", ".save", function() {
						console.log($("#addForm").serialize());
						$.ajax({
							type: "POST",
							url: "${pageContext.request.contextPath}/admin/addSuperAdmin",
							data: $("#addForm").serialize(),
							dataType: "json",
							success: function(data) { /*执行成功*/
								console.log(data);
								if(data.code == 200) {
									//关闭添加模态框
									$('#myModalAdd').modal('hide');
									//刷新页面
									window.location.reload();
								}
								alert(data.msg);
							},
							error: function() { /*执行失败*/
								alert("添加失败！");
							}
						});
					});
					/*删除*/
					$("body").on("click", ".del", function() {
						if(confirm('您是真的要删除吗？')) {
							//获取当前删除行的id
							var $id = $(this).parents("tr").data("id");
							console.log($id);
							var _this = $(this); //缓存当前按钮元素

							$.ajax({
								url:"${pageContext.request.contextPath}/admin/deleteAdmin/"+$id,
								type: "post",
								contentType: "application/json;charset=utf-8",
								dataType: "json",
								success:function (data) {
									console.log(data)
									if(data.code == 200) {
										//删除当前行
										_this.parents("tr").remove();
									}
									alert(data.msg);
								},
								error: function() { /*执行失败*/
									alert("删除失败！");
								}
							})
						}
					});
				});
			</script>
		</div>

	</body>

</html>